<template>
  <div
    class="item"
    :style="{ flexDirection: type !== 'row' ? 'column' : 'row' }"
  >
    <div class="title">{{ title }}</div>
    <div class="status" :style="{ textAlign: align }">{{ status }}</div>
  </div>
</template>
<script>
export default {
  name: "Status",
  props: {
    title: {
      default: "",
      type: String,
    },
    status: {
      default: "",
      type: String,
    },
    type: {
      default: "column",
      type: String,
    },
    align: {
      default: "center",
      type: String,
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.item {
  display: flex;
  .title {
    font-size: 20px;
    color: #ffffff;
  }
  .status {
    font-weight: 600;
    font-size: 24px;
    color: #69d9fe;
    text-align: center;
  }
}
</style>